﻿<!DOCTYPE html>
<html>
<head>
    <title>spin.js</title>
    <meta name="description" content="An animated CSS activity indicator with VML fallback.">
    <meta name="viewport" content="width=1024, maximum-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/main.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/fd-slider.css">
    <script type="text/javascript" src="js/prettify.js"></script>
    <style type="text/css">
        #preview {
            position: relative;
            background: #333;
            color: #fff;
            float: left;
            width: 375px;
            height: 375px;
            margin: 0 20px 20px 0;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
    </style>
</head>
<body>

<div id="content">
    <div id="example">
        <!--显示层-->
        <div id="preview"></div>
        <!--控制层-->
        <form id="opts">
            <label>Lines:</label><input type="text" name="lines" min="5" max="16" step="2" value="12"><br>
            <label>Length:</label><input type="text" name="length" min="0" max="56" value="28"><br>
            <label>Width:</label><input type="text" name="width" min="2" max="52" value="14"><br>
            <label>Radius:</label><input type="text" name="radius" min="0" max="84" value="42"><br>
            <label>Scale:</label><input type="text" name="scale" min="0.0" max="5.0" step="0.25" value="1.0"><br>
            <label>Corners:</label><input type="text" name="corners" min="0" max="1" step="0.1" value="1"><br>
            <label>Opacity:</label><input type="text" name="opacity" min="0" max="1" step="0.05" value="0.25"><br>
            <label>Rotate:</label><input type="text" name="rotate" min="0" max="90" value="0"><br>
            <label>Direction:</label>
            <select name="direction">
                <option value="1">Clockwise</option>
                <option value="-1">Counterclockwise</option>
            </select>
            <br>
            <label>Speed:</label><input type="text" name="speed" min="0.5" max="2.2" step="0.1" value="1"><br>
            <label>Trail:</label><input type="text" name="trail" min="10" max="100" value="60"><br>
            <label>↕:</label><input class="percent" type="text" name="top" min="0" max="100" value="50"><br>
            <label>↔:</label><input class="percent" type="text" name="left" min="0" max="100" value="50"><br>
            <label>Shadow:</label><input type="checkbox" name="shadow"><br>
            <label>Hwaccel:</label><input type="checkbox" name="hwaccel"><br>
        </form>

        <div class="share">
            <input type="checkbox" id="share">
            <label for="share">
                <b>Share it!</b> If checked, the option values will be stored in the URL so that you can easily share
                your settings.
            </label>
        </div>
         <!--显示控制参数，调控显示js-->
        <div name="显示控制参数">
            <pre class="prettyprint">
                var opts = {
                lines: <span id="opt-lines" class="lit">12</span> // The number of lines to draw
                , length: <span id="opt-length" class="lit">7</span> // The length of each line
                , width: <span id="opt-width" class="lit">5</span> // The line thickness
                , radius: <span id="opt-radius" class="lit">10</span> // The radius of the inner circle
                , scale: <span id="opt-scale" class="lit">1.0</span> // Scales overall size of the spinner
                , corners: <span id="opt-corners" class="lit">1</span> // Corner roundness (0..1)
                , color: '#000' // #rgb or #rrggbb or array of colors
                , opacity: <span id="opt-opacity" class="lit">0.25</span> // Opacity of the lines
                , rotate: <span id="opt-rotate" class="lit">0</span> // The rotation offset
                , direction: <span id="opt-direction" class="lit">1</span> // 1: clockwise, -1: counterclockwise
                , speed: <span id="opt-speed" class="lit">1</span> // Rounds per second
                , trail: <span id="opt-trail" class="lit">100</span> // Afterglow percentage
                , fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
                , zIndex: 2e9 // The z-index (defaults to 2000000000)
                , className: 'spinner' // The CSS class to assign to the spinner
                , top: '<span id="opt-top" class="str">50%</span>' // Top position relative to parent
                , left: '<span id="opt-left" class="str">50%</span>' // Left position relative to parent
                , shadow: <span id="opt-shadow" class="kwd">true</span> // Whether to render a shadow
                , hwaccel: <span id="opt-hwaccel" class="kwd">false</span> // Whether to use hardware acceleration
                , position: 'absolute' // Element positioning
                }
                var target = document.getElementById('foo')
                var spinner = new Spinner(opts).spin(target);
            </pre>
            <pre class="prettyprint">
                var spinner = new Spinner().spin()
                target.appendChild(spinner.el)
            </pre>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/fd-slider.js"></script>
<script src="js/spin.min.js"></script>
<script>
    $.fn.spin = function (opts) {
        this.each(function () {
            var $this = $(this)
                    , data = $this.data()

            if (data.spinner) {
                data.spinner.stop()
                delete data.spinner
            }
            if (opts !== false) {
                window.s = data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this)
            }
        })
        return this
    }
    //$('#dot').spin()
    prettyPrint()
    function update() {
        var opts = {}
        $('#opts input[min], #opts select').each(function () {
            var percent = $(this).hasClass('percent')
                    , val = percent ? this.value + '%' : parseFloat(this.value)
            $('#opt-' + this.name).text(opts[this.name] = val)
        })
        $('#opts input:checkbox').each(function () {
            opts[this.name] = this.checked
            $('#opt-' + this.name).text(this.checked)
        })
        $('#preview').spin(opts)
        if ($('#share').is(':checked')) {
            window.location.replace('#?' + $('form').serialize())
        }
    }
    $(function () {
        var params = {}
        var hash = /^#\?(.*)/.exec(location.hash)
        if (hash) {
            $('#share').prop('checked', true)
            $.each(hash[1].split(/&/), function (i, pair) {
                var kv = pair.split(/=/)
                params[kv[0]] = kv[kv.length - 1]
            })
        }
        $('#opts input[min], #opts select').each(function () {
            var val = params[this.name]
                    , percent = $(this).hasClass('percent')
                    , extraOpt = percent ? '%' : ''
            if (val !== undefined) this.value = val + extraOpt
            this.onchange = update
        })
        $('#opts input:checkbox').each(function () {
            this.checked = !!params[this.name]
            this.onclick = update
        })
        $('#share').click(function () {
            window.location.replace(this.checked ? '#?' + $('form').serialize() : '#!')
        })
        update()
    });
</script>
</body>
</html>
